<template>
	<div class="padding20">
		<el-row style="margin-bottom: 7px">
			<el-form :inline="true" :model="queryForm" @submit.native.prevent @keyup.enter.native="queryList">
				<!--				<el-form-item>-->
				<!--					<el-input-->
				<!--						prefix-icon="el-icon-search"-->
				<!--						v-model="queryForm.title"-->
				<!--						autocomplete="off"-->
				<!--						placeholder="请输入应用标题"-->
				<!--						clearable-->
				<!--					></el-input>-->
				<!--				</el-form-item>-->

				<!--				<el-form-item v-show="collapse.flag">-->
				<!--					<fortress-select-->
				<!--						v-model="queryForm.flowId"-->
				<!--						:dictList="flowIdList"-->
				<!--						placeholder="请选择流程"-->
				<!--						clearable-->
				<!--						filterable-->
				<!--					></fortress-select>-->
				<!--				</el-form-item>-->
				<el-form-item>
					<fortress-select
						v-model="queryForm.approveStatus"
						:dictList="ApproveStatusList"
						placeholder="请选择审批状态"
						clearable
						filterable
					></fortress-select>
					<!--					<el-select v-model="queryForm._castle_approve_status" placeholder="请选择审批状态" clearable>-->
					<!--						<el-option label="启用" value="1"></el-option>-->
					<!--						<el-option label="禁用" value="2"></el-option>-->
					<!--					</el-select>-->
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" icon="el-icon-search" @click="queryList({ current: 1 })">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" icon="el-icon-refresh-left" @click="resetQueryForm">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="text" @click="handleCollapseState">
						{{ collapse.label }}
						<i :class="collapse.icon"></i>
					</el-button>
				</el-form-item>
			</el-form>
			<div style="float: right; padding-right: 17px">
				<i class="el-icon-download" style="margin-right: 10px; cursor: pointer" @click="handleExport"></i>
				<i class="el-icon-refresh" style="margin-right: 10px; cursor: pointer" @click="refresh"></i>
			</div>
		</el-row>
		<el-table ref="multipleTable" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
			<el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>

			<el-table-column prop="_castle_apply_user_name" label="申请人" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="_castle_apply_date" label="申请时间" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="_castle_approve_status" label="审批状态" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column label="操作" fixed="right" min-width="180">
				<template slot-scope="scope">
					<el-button
						v-if="$tools.hasPermission('flowable:flowableApp:analyzeInfo')"
						size="mini"
						plain
						@click="handleInfo(scope.row)"
					>
						详情
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination :total="page.total" :current-page="page.current" :page-size="page.size" @refreshData="queryList"></pagination>
		<!-- 详情 -->
		<form-info v-if="formInfoVisible" ref="formInfo"></form-info>
	</div>
</template>
<script>
import { pageAnalyzeFlowableApp, flowableappAnalyzeDataExport } from "@/api/flowable/flowableapp.js"
import FormInfo from "./flowableapp-analyze-info"
import FortressPagination from "@/components/fortress-pagination.vue"
import { enumList } from "@/api/public.api.js"
export default {
	data() {
		return {
			tableData: [],
			formEditVisible: false,
			formInfoVisible: false,
			queryForm: {
				title: "",
				flowId: this.$route.query.id,
				status: "",
				approveStatus: "",
			},
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
			collapse: {
				icon: "el-icon-arrow-down el-icon--right",
				label: "展开",
				flag: false,
			},
			tableShowList: [],
			YesNoList: [],
			ApproveStatusList: [],
			flowIdList: [],
		}
	},
	components: {
		"form-info": FormInfo,
		pagination: FortressPagination,
	},
	created() {
		this.queryEnumList()
		this.queryList()
	},
	methods: {
		queryEnumList() {
			this.YesNoList = []
			enumList("YesNo", "").then(resp => {
				if (resp.code == 0) {
					this.YesNoList = resp.data
				}
			})
			this.ApproveStatusList = []
			enumList("ApproveStatus", "flowable").then(resp => {
				if (resp.code == 0) {
					this.ApproveStatusList = resp.data
				}
			})
		},
		refresh() {
			this.tableData = []
			this.queryList({ current: 1 })
		},
		//查询表格数据
		queryList(page) {
			if (page) {
				this.page.current = page.current ? page.current : this.page.current
				this.page.size = page.size ? page.size : this.page.size
			}
			this.queryForm.current = this.page.current
			this.queryForm.size = this.page.size
			pageAnalyzeFlowableApp(this.queryForm).then(resp => {
				if (resp.code == 0) {
					this.tableData = resp.data.records
					this.page.total = resp.data.total
					//查询页大于总页数，重新查询
					let cu =
						this.page.total % this.page.size == 0
							? parseInt(this.page.total / this.page.size)
							: parseInt(this.page.total / this.page.size + 1)
					if (cu > 0 && this.page.current > cu) {
						this.queryList({ current: cu })
					}
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		//打开详情窗口
		handleInfo(row) {
			this.formInfoVisible = true
			this.$nextTick(() => {
				this.$refs.formInfo.init(this.queryForm.flowId, row._castle_process_instance_id, row.id, row._castle_process_engine_version)
			})
		},
		//重置查询框
		resetQueryForm() {
			this.queryForm = {
				title: "",
				flowId: this.$route.query.id,
				status: "",
				approveStatus: "",
			}
		},
		//切换查询条件收缩框
		handleCollapseState() {
			this.collapse.flag = !this.collapse.flag
			if (this.collapse.flag) {
				this.collapse.icon = "el-icon-arrow-up el-icon--right"
				this.collapse.label = "收起"
			} else {
				this.collapse.icon = "el-icon-arrow-down el-icon--right"
				this.collapse.label = "展开"
			}
		},
		//流程格式化返回
		flowIdFmt(row) {
			let name = ""
			if (this.flowIdList) {
				this.flowIdList.forEach(item => {
					if (item.code == row.flowId) {
						name = item.name
					}
				})
			}
			return name
		},
		//可见字段excel导出
		handleExport() {
			flowableappAnalyzeDataExport({ dto: this.queryForm })
		},
	},
}
</script>
<style scoped></style>
